<template>
  <div id="supervisionInformationShow" class="app-container">
    <div class="filter-container">
      <el-form
        :inline="true"
        label-position="right"
        label-width="200px"
        class="demo-form-inline"
      >
        <el-form-item label="规划设计方案评审时间">
          {{pingshenTime}}
        </el-form-item>
        <el-form-item style="margin-left:20px;" label-width="200px;" label="规划设计方案评审位置信息：">
          <el-input style="width: 200px;" readonly v-model="pingshenPlace" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="">
          <el-checkbox :disabled="true" v-model="checked">规划设计方案评审通过</el-checkbox>
        </el-form-item>
      </el-form>
      <!-- <el-button style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search">查询</el-button> -->
    </div>
    <!-- <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger">删除所选</el-button>
    </div> -->

    <el-table :header-cell-style="{background:'#f9f9f9',color:'#606266'}" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="index" align="center" label="序号" width="200">
      </el-table-column>
      <el-table-column label="现场照片">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="seeImg(scope.row)" size="small">查看</el-button>
          <el-button type="text" @click="downLoad(scope.row)" size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination> -->
    <el-dialog
      :close-on-click-modal="false"
      title="查看图片"
      :visible.sync="showImg"
      :before-close="handleClose"
      class="showImgBox">
      <div class="imgBox">
        <img :src="$https+showUrl" alt="">
      </div> 
      <span slot="footer" class="dialog-footer">
        <el-button @click="showImg = false">取 消</el-button>
        <el-button type="primary" @click="showImg = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { supervisingInfo } from "@/api/ghsjAndssfaPingShen";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      showImg:false,
      checked:true,
      activeName: '1',
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        realName: null,
        level: null,
        applicantIdCardNum: null
      },
      total:0, //总数
      showUrl:'', //弹框图片路径
      pingshenTime:'',
      pingshenPlace:'',
    };
  },
  created() {
    this.getData();
  },
  methods: {
    downLoad(row){ //下载
      window.location.href=this.$https+row.livePhotoPath
    },
    seeImg(row){
      this.showImg=true
      console.log(row,"图片Item")
      this.showUrl=row.path
    },
    handleClose(){
      this.showImg=false
    },
    getData(){
      this.listLoading=true
      var data={}
      var objArr=this.listQuery
      for (var index in objArr) {
        if(objArr[index]!=''&&objArr[index]!=null){
          data[index]=objArr[index];
        }
      }   
      data["projectId"]=localStorage.getItem("projectId")
      supervisingInfo(data).then(res=>{
        console.log(res)
        if(res.data!=null){
          var arr=[]
          arr.push({name:"评审现场照片",path:res.data.livePhotoPath})
          arr.push({name:"专家签字照片",path:res.data.signPhotoPath})
          if(res.data.yesOrNo=="YES"){
            this.checked=true
          }else{
            this.checked=false
          }
          this.pingshenTime=res.data.time
          this.pingshenPlace=res.data.place
          this.list=arr
        }
        this.listLoading=false
      }).catch(error=>{
        this.listLoading=false
      })
    },
    //改变每页显示条数
    handleSizeChange(e){
      console.log(e)
    },
    //改变页码
    handleCurrentChange(num){
      console.log(num)
    },
    fetchData() {
      this.listLoading = true;
      getList().then(response => {
        console.log(response.data)
        this.list = response.data.items;
        this.total= response.data.total;
        this.listLoading = false;
      }).catch(error=>{
        this.listLoading=false
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="scss" scoped>
#supervisionInformationShow /deep/ .el-tabs__nav-wrap::after{
  height: 1px;
}
#supervisionInformationShow .showImgBox .el-dialog{
  min-width: 500px;
}
.imgBox{
  text-align: center;
}
.imgBox img{
  max-width: 100%;
}

#supervisionInformationShow /deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label{
  border-color: #409EFF;
}
#supervisionInformationShow /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
  border-color: #409EFF;
background-color: #409EFF;
}
#supervisionInformationShow /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
  border-color: #fff;
}
#supervisionInformationShow /deep/ .el-checkbox__input.is-disabled+span.el-checkbox__label{
  color: #12203e;
}
</style>
